const Utils = require("./utils.js")
const {CN,WEB,EN} = require("./constant.js")

module.exports = class InputBox{
	constructor($env,$event,setting={}){
		this.$dom = Utils.createDOM("div",{
			id:"input-box-mask",
			class:`${CN.hide} base-mask`
		})
		this.__tpl = `
			<div id="input-box-wrap" class="input-box-wrap"><input autofocus="autofocus" id="input-box-input" class="input-box-input"/><button class="input-box-done" id="input-box-done">确定</button></div>
		`;
		this.$dom.innerHTML = this.__tpl;
		this.$picker = this.$dom.querySelector("#input-box-wrap")

		$event.emit("append:render",this.$dom)
		this.$event = $event;
		this.bind()
	}
	bind(){
		this.$picker.addEventListener("click",(e)=>{
			e.stopPropagation();
		})
		this.$picker.querySelector("#input-box-done")
		.addEventListener("click",(e)=>{
			let text = this.$picker.querySelector("#input-box-input").value;
			this.$event.emit(EN.input_done,text)
			this.hide();
		})
		this.$dom.addEventListener("click",()=>{
			this.$event.emit(EN.input_done,"")
			this.hide()
		})
	}
	hide(){
		this.$picker.querySelector("#input-box-input").value="";
		this.$dom.classList.add(CN.hide);
	}
	show(data){
		this.$picker.querySelector("#input-box-input").setAttribute("placeholder",data.placeholder)
		this.$dom.classList.remove(CN.hide);
	}
}